<template>
    <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
            <img :src="image" width="100%" height="200" />
        </van-swipe-item>
    </van-swipe>
    <!--快捷入口-->
    <van-grid :column-num="5" :border="false" icon-size="30px">
        <van-grid-item v-for="value in icondata" :key="value" :icon="value.icon" :text="value.text" />
    </van-grid>
   
    <!--视频文章-->
    <div class="content-video">
        
        <div v-for="item in videodata" :key="item.id"  @click="oncarDetail(item.id)">
             <van-icon name="play-circle" class="icons" size="40px"/>
            <div class="content-video-title">{{ item.vname }}</div>
            <div class="content-video-list" >
                <img :src="item.vimg"
                    alt="" width="100%" height="200">
            </div>
            <div>
                <van-row>
                    <van-col span="4">{{item.username}}</van-col>
                    <van-col span="4">{{item.count}}万次播放</van-col>
                    <van-col span="16">{{item.createtime}}</van-col>
                </van-row>

            </div>
           <hr style="color: aliceblue;"></hr>

        </div>

    </div>


</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
//引入axios
import axios from 'axios'
//轮播图数据
const images = ref([
    // 'http://www.hphs.com/image/wuling.png',
    // 'https://p1-dcd.byteimg.com/img/tos-cn-i-dcdx/bf13b8c482454b5a80775f04a1a80356~tplv-dcdx-default:0:0.png',
    // 'https://p1-dcd.byteimg.com/img/tos-cn-i-dcdx/a29e6938990f4392b407718f71c0c479~tplv-dcdx-default:0:0.png',
    // 'https://p1-dcd.byteimg.com/img/tos-cn-i-dcdx/2d27a1111ad0437ca77f339cbefdf326~tplv-dcdx-default:0:0.png',

])
// 快捷入口数据
const icondata = ref([
    { id: 1, icon: 'http://img12.360buyimg.com/babel/jfs/t20270715/38278/23/22574/7960/6694edb4F07db03e3/d663cd498321eadc.png', text: '车型大全' },
    { id: 2, icon: 'https://lf3-motor.dcarstatic.com/obj/motor-fe-static/motor/wap/_next/static/images/rank-fffb4b136cdb7c8a4423..png', text: '排行榜' },
    { id: 3, icon: 'https://lf3-motor.dcarstatic.com/obj/motor-fe-static/motor/wap/_next/static/images/community-e7b0155680ebf038a88c..png', text: '车友圈' },
    { id: 4, icon: 'https://lf3-motor.dcarstatic.com/obj/motor-fe-static/motor/wap/_next/static/images/usedcar-cc09df4fb419a8ffde96..png', text: '二手车' },
    { id: 5, icon: 'https://lf3-motor.dcarstatic.com/obj/motor-fe-static/motor/wap/_next/static/images/search-3191b0fb041f0728a3f6..png', text: '条件选车' }

])

//视频数据
const videodata = ref([
//     { id: 1, title: '五菱宏光mini开了六千公里，吐槽一下该车的几个缺点！', img: 'https://p3-dcd-sign.byteimg.com/motor-article-img/a60eba18dbcd4f31b3d651c4d2d62a2e~tplv-resize:640:0.image?lk3s=0bff8f5f&x-expires=1763282355&x-signature=Op2OCNmjVzJzAsrFbsoKiXqAM%2F8%3D&psm=motor.content.packer&biz_tag=motorimage' }
// ,    { id: 2, title: '五菱宏光mini开了六千公里，吐槽一下该车的几个缺点！', img: 'https://p3-dcd-sign.byteimg.com/motor-article-img/a60eba18dbcd4f31b3d651c4d2d62a2e~tplv-resize:640:0.image?lk3s=0bff8f5f&x-expires=1763282355&x-signature=Op2OCNmjVzJzAsrFbsoKiXqAM%2F8%3D&psm=motor.content.packer&biz_tag=motorimage' }
// ,    { id: 3, title: '五菱宏光mini开了六千公里，吐槽一下该车的几个缺点！', img: 'https://p3-dcd-sign.byteimg.com/motor-article-img/a60eba18dbcd4f31b3d651c4d2d62a2e~tplv-resize:640:0.image?lk3s=0bff8f5f&x-expires=1763282355&x-signature=Op2OCNmjVzJzAsrFbsoKiXqAM%2F8%3D&psm=motor.content.packer&biz_tag=motorimage' }

]) 

//加载一个渲染 页面加载后立即渲染数据
onMounted(()=>{
    CarVideoApi()
})

const CarVideoApi=()=>{
    //前后交互 获取数据
    axios.get('http://localhost:8080/api/select').then(res=>{
        console.log(res.data.data);
        videodata.value=res.data.data;
        images.value=res.data.data.map(item => item.vimg)
    })
}

//跳转
const oncarDetail = (id) =>{
    console.log(11111);
    //跳转详细页并携带id过去
    router.push({name:'cardetail',query:{id:id}})
}


</script>

<style scoped>
.content-video{
    margin-top: 10px;
    margin-bottom: 70px;

.content-video-title{
    font-size: 16px;
    padding-bottom: 10px;
    margin-top: -34px;
}
.van-row{
 font-size: 10px;
  color: #979AA8;
  padding-left: 3px;
}

}
.icons{
    position: relative;
    top: 100px;
    left: 193px;
    z-index: 1;
}
</style>